<template>
  <div class="tabBar" :style="{ height: $store.state.screenH + 'px' }">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="外卖">
        <img slot="icon" src="../assets/select/base.png" v-if="selected==='外卖'"/>
        <img slot="icon" src="../assets/icon/base.png" v-else/>
        外卖
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img slot="icon" src="../assets/icon/history.png" />
        订单
      </mt-tab-item>
      <mt-tab-item id="发现">
        <img slot="icon" src="../assets/icon/knowledgebase.png" />
        发现
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../assets/icon/my.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
    <mt-tab-container v-model="selected" :style="{height:$store.state.screenH-60+'px',overflow:'auto'}">
      <mt-tab-container-item id="外卖">
        <mt-cell v-for="n in 10" title="tab-container 1" :key="n"></mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item id="订单">
        <mt-cell v-for="n in 5" title="tab-container 2" :key="n"></mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item id="发现">
        <mt-cell v-for="n in 7" title="tab-container 3" :key="n"></mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item id="我的">
        <mt-cell v-for="n in 15" title="tab-container 4" :key="n"></mt-cell>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "外卖",
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
div.tabBar {
}
</style>